<template>
  <div class="city">
    <div class="cityHeader">
      <p>
        當前定位:
        <span>{{positonCity}}</span>
      </p>
    </div>
    <div class="hotCity">
      <h4>熱門城市</h4>
      <div class="hotCityList">
        <span v-for="(item,index) in hotCityList" :key="index">{{item}}</span>
      </div>
    </div>
    <div class="cityList">
      <div class="letter" :id="item.initial" v-for="(item,index) in cityList" :key="index">
        <h3>{{item.initial}}</h3>
        <ul>
          <li v-for="(itemp,ind) in item.list" :key="ind" @click="cityClick">
            <span>{{itemp.name}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="letterTittle">
      <a :href="'#'+item.initial" v-for="(item,index) in cityList" :key="index">{{item.initial}}</a>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'city',
  data () {
    return {
      positonCity: '定位中...',
      hotCityList: [
        '北京',
        '上海',
        '深圳',
        '广州',
        '石家庄',
        '保定',
        '廊坊',
        '天津'
      ],
      cityList: []
    }
  },
  mounted: function () {
    this.getCity()
  },
  methods: {
    getCity: function () {
      axios.get('/city.json').then(response => {
        console.log(response)
        var data = response.data.city
        this.cityList = data
      })
    },
    cityClick: function (e) {
      var city = e.srcElement.innerText
      this.$store.commit('changeCity', city)
      // console.log(this.$store.state.city);
      this.positonCity = this.$store.state.city
      this.$router.push({ path: '/' })
    }
  }
}
</script>

<style lang="stylus" scope>
.city
  width: 100%
  background-color: #f4f4f4
  .cityHeader
    height: 1.12rem
    line-height: 1.12rem
    text-align: left
    border-bottom: 1px solid #d5d5d5
    background-color: #fff
    p
      margin-left: 0.32rem
      font-size: 0.28rem
      span
        border: 1px solid #ccc
        padding: 0.12rem
        border-radius: 5px
        margin-left: 0.3rem
  .hotCity
    width: 100%
    h4
      margin: 0.32rem
      font-size: 0.28rem
    .hotCityList
      display: flex
      flex-direction: row
      justify-content: space-between
      flex-wrap: wrap
      padding: 0 0.32rem
      span
        font-size: 0.28rem
        text-align: center
        border-radius: 5px
        padding: 0.12rem 0.45rem
        box-sizing: border-box
        background: #fff
        border: 1px solid #d5d5d5
        box-sizing: border-box
        margin-bottom: 17px
.cityList
  width: 100%
  .letter
    width: 97%
    h3
      font-size: 0.3rem
      padding-left: 0.32rem
      height: 0.68rem
      line-height: 0.68rem
    ul
      background-color: #fff
      width: 100%
      li
        font-size: 0.28rem
        border-bottom: 1px solid #ccc
        height: 0.68rem
        line-height: 0.68rem
        span
          font-size: 0.28rem
          padding-left: 0.32rem
      li:nth-last-child(1)
        border: none
.letterTittle
  position: fixed
  right: 0
  display: flex
  align-items: center
  flex-direction: column
  top: 3rem
  a
    font-size: 0.2rem
    padding-top: 2px
    color: red
</style>
